<template>
    <div class="content">

        <div class="header-actions">
            <el-button @click="$router.push('/main/renshi/renshizhidu')" icon="el-icon-back">返回</el-button>
            <span>
                <el-button @click="saveData" v-if="!isView" type="success" icon="el-icon-check">保存</el-button>
                <el-button @click="goToList" type="" icon="el-icon-menu">列表</el-button>
                <el-button type="info" icon="el-icon-printer" @click="printForm">打印</el-button>
            </span>
        </div>
        <!-- <router-link to="/main/renshi/renshizhidu" style="">返回</router-link>
        <button @click="saveData" v-if="!isView">保存</button>
        <button @click="goToList">列表</button>
        <el-button type="primary" icon="el-icon-printer" @click="printForm">打印</el-button> -->
        <h2>工作移交单</h2>
        <table border="1">
            <tr>
                <td>姓名</td>
                <td><input type="text" v-model="formData.name" :disabled="isView"></td>
                <td>工号</td>
                <td><input type="text" v-model="formData.jobNumber" :disabled="isView"></td>
                <td>所属部门</td>
                <td><input type="text" v-model="formData.department" :disabled="isView"></td>
                <td>职务</td>
                <td><input type="text" v-model="formData.position" :disabled="isView"></td>
            </tr>
            <tr>
                <th>部门</th>
                <th colspan="5">移交内容</th>
                <th>是否ok</th>
                <th>确认</th>
            </tr>
            <tr>
                <td rowspan="5">
                    所属<br>部门
                </td>
                <td>
                    1
                </td>
                <td colspan="4">
                    电脑及电脑配套设备是否完好移交？
                </td>
                <td>
                    <input type="checkbox" v-model="formData.computerEquipment" :disabled="isView">
                </td>
                <td rowspan="5">
                    工作接替/代理人：<input type="text" v-model="formData.departmentSuccessor" :disabled="isView"><br>
                    部门经理：<input type="text" v-model="formData.departmentManager" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
                <td colspan="4">
                    技术资料、文件是否完整移交？借阅的文件、资料是否归还？
                </td>
                <td>
                    <input type="checkbox" v-model="formData.technicalDocuments" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
                <td colspan="4">
                    工具是否如实交还？（如硬盘、U盘、公司统一做的个人印章等）
                </td>
                <td>
                    <input type="checkbox" v-model="formData.tools" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
                <td colspan="4">
                    相关帐目是否无误？目前承担工作是否清楚移交？
                </td>
                <td>
                    <input type="checkbox" v-model="formData.accounts" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td>
                    5
                </td>
                <td colspan="4">
                    办公文具是否归还？办公钥匙是否归还？
                </td>
                <td>
                    <input type="checkbox" v-model="formData.officeSupplies" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td rowspan="2">
                    品质部
                </td>
                <td>
                    1
                </td>
                <td colspan="4">
                    静电防护用品是否归还？（如静电衣、静电手环等）
                </td>
                <td>
                    <input type="checkbox" v-model="formData.antiStaticSupplies" :disabled="isView">
                </td>
                <td rowspan="2">
                    部门经办人/经理：
                    <input type="text" v-model="formData.qmanager" :disabled="isView">
                </td>

            </tr>
            <tr>
                <td>
                    2
                </td>
                <td colspan="4">
                    其他：
                    <input type="text" v-model="formData.qother" :disabled="isView">
                </td>
                <td>
                    <input type="checkbox" v-model="formData.qotherCheck" :disabled="isView">
                </td>
            </tr>

            <tr>
                <td>
                    工程部
                </td>
                <td>
                    1
                </td>
                <td colspan="4">
                    技术资料文件是否归还？
                </td>
                <td>
                    <input type="checkbox" v-model="formData.technicalFiles" :disabled="isView">
                </td>
                <td>
                    部门经理：
                    <input type="text" v-model="formData.emanager" :disabled="isView">
                </td>

            </tr>

            <tr>
                <td rowspan="2">
                    物控部
                </td>
                <td>
                    1
                </td>
                <td colspan="4">
                    是否在仓库借有产品/物料？（工装/治具等）
                </td>
                <td>
                    <input type="checkbox" v-model="formData.productsBorrowed" :disabled="isView">
                </td>
                <td rowspan="2">
                    部门经理：
                    <input type="text" v-model="formData.mmanager" :disabled="isView">
                </td>

            </tr>
            <tr>
                <td>
                    2
                </td>
                <td colspan="4">
                    是否如实归还？相关借条是否处理完毕？
                </td>
                <td>
                    <input type="checkbox" v-model="formData.returnedProperly" :disabled="isView">
                </td>
            </tr>

            <tr>
                <td>
                    厂务部
                </td>
                <td>
                    1
                </td>
                <td colspan="4">
                    相关交办工作是否完成？
                </td>
                <td>
                    <input type="checkbox" v-model="formData.fworkCompleted" :disabled="isView">
                </td>
                <td>
                    部长/总监：
                    <input type="text" v-model="formData.fmanager" :disabled="isView">
                </td>

            </tr>
            <tr>
                <td>
                    总经理办公室
                </td>
                <td>
                    1
                </td>
                <td colspan="4">
                    相关交办工作是否完成？
                </td>
                <td>
                    <input type="checkbox" v-model="formData.gworkCompleted" :disabled="isView">
                </td>
                <td>
                    总经理：
                    <input type="text" v-model="formData.gmanager" :disabled="isView">
                </td>

            </tr>
            <tr>
                <td rowspan="3">
                    财务管理部
                </td>
                <td>
                    1
                </td>
                <td colspan="4">
                    是否在财务有未结清帐目？是否已结清?
                </td>
                <td>
                    <input type="checkbox" v-model="formData.unsettledAccounts" :disabled="isView">
                </td>
                <td rowspan="3">
                    部门经理：
                    <input type="text" v-model="formData.finManager" :disabled="isView">
                </td>

            </tr>
            <tr>
                <td>
                    2
                </td>
                <td colspan="4">
                    相关个人借款是否还清或妥善处理？
                </td>
                <td>
                    <input type="checkbox" v-model="formData.personalLoans" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
                <td colspan="4">
                    负责固定资产是否齐全？
                </td>
                <td>
                    <input type="checkbox" v-model="formData.fixedAssets" :disabled="isView">
                </td>
            </tr>

            <tr>
                <td rowspan="7">
                    企业管理部
                </td>
                <td>
                    1
                </td>
                <td colspan="4">
                    食堂费用：<input type="number" min="0" v-model="formData.canteenMonth1" :disabled="isView"> 月 <input
                        type="number" min="0" v-model="formData.canteenAmount1" :disabled="isView">元<br>
                    <input type="number" min="0" v-model="formData.canteenMonth2" :disabled="isView">月<input
                        type="number" min="0" v-model="formData.canteenAmount2" :disabled="isView"> 元
                </td>
                <td>
                    <input type="checkbox" v-model="formData.canteenCheck" :disabled="isView">
                </td>
                <td>
                    退饭卡经办人：<input type="text" v-model="formData.canteenHandler" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td rowspan="2">
                    2
                </td>
                <td colspan="4">
                    宿舍钥匙退还、行李搬出、家属证退还
                </td>
                <td>
                    <input type="checkbox" v-model="formData.dormitoryBasicCheck" :disabled="isView">
                </td>
                <td rowspan="2">
                    宿管办经办人：<input type="text" v-model="formData.dormitoryHandler" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td style="text-align: left;" colspan="4">
                    行政后勤费用（元）：<br>
                    <input type="number" min="0" v-model="formData.rent1Month" :disabled="isView">月房租 <input
                        type="number" min="0" v-model="formData.rent1Amount" :disabled="isView">
                    水电<input type="text" v-model="formData.waterElectricity1" :disabled="isView">
                    维修: <input type="number" min="0" v-model="formData.repair1Count" :disabled="isView">件工衣
                    <input type="number" min="0" v-model="formData.uniform1Amount" :disabled="isView">元<br>
                    <input type="number" min="0" v-model="formData.rent2Month" :disabled="isView">月房租 <input
                        type="number" min="0" v-model="formData.rent2Amount" :disabled="isView">
                    水电<input type="text" v-model="formData.waterElectricity2" :disabled="isView">
                    维修: <input type="number" min="0" v-model="formData.repair2Count" :disabled="isView">件工衣
                    <input type="number" min="0" v-model="formData.uniform2Amount" :disabled="isView">元
                </td>
                <td>
                    <input type="checkbox" v-model="formData.dormitoryDetailsCheck" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
                <td style="text-align: left;" colspan="4">
                    社保/住房公积金（元）：<br>
                    <input type="number" min="0" v-model="formData.socialMonth1" :disabled="isView"> 月 养老<input
                        type="number" min="0" v-model="formData.pension1" :disabled="isView">
                    医疗<input type="number" min="0" v-model="formData.medical1" :disabled="isView">
                    失业<input type="number" min="0" v-model="formData.unemployment1" :disabled="isView">
                    住房公积金<input type="number" min="0" v-model="formData.housingFund1" :disabled="isView"><br>
                    <input type="number" min="0" v-model="formData.socialMonth2" :disabled="isView"> 月 养老<input
                        type="number" min="0" v-model="formData.pension2" :disabled="isView">
                    医疗<input type="number" min="0" v-model="formData.medical2" :disabled="isView">
                    失业<input type="number" min="0" v-model="formData.unemployment2" :disabled="isView">
                    住房公积金<input type="number" min="0" v-model="formData.housingFund2" :disabled="isView">
                </td>
                <td>
                    <input type="checkbox" v-model="formData.socialCheck" :disabled="isView">
                </td>
                <td>
                    退社保/住房公积金<br>
                    经办人：
                    <input type="text" v-model="formData.socialHandler" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
                <td colspan="4">
                    是否发生须扣除的培训费用？（费用： <input type="number" min="0" v-model="formData.trainingAmount" :disabled="isView">
                    )
                </td>
                <td>
                    <input type="checkbox" v-model="formData.trainingCheck" :disabled="isView">
                </td>
                <td>
                    培训组经办人:
                    <input type="text" v-model="formData.trainingHandler" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td>
                    5
                </td>
                <td colspan="4">
                    电脑硬件、系统及文件是否完整可用？网络权限是否注销或移交？职员宿舍网费（费用：<input type="number" min="0" v-model="formData.networkAmount"
                        :disabled="isView"> ）交接人<input type="text" v-model="formData.networkHandoverPerson"
                        :disabled="isView">
                </td>
                <td>
                    <input type="checkbox" v-model="formData.networkCheck" :disabled="isView">
                </td>
                <td>
                    网络组经办人：
                    <input type="text" v-model="formData.networkHandler" :disabled="isView">
                </td>
            </tr>
            <tr>
                <td>
                    6
                </td>
                <td colspan="4">
                    厂牌是否归还？系统是否删除？
                </td>
                <td>
                    <input type="checkbox" v-model="formData.factoryBadgeCheck" :disabled="isView">
                </td>
                <td>
                    人资组经办人：
                    <input type="text" v-model="formData.factoryBadgeHandler" :disabled="isView">
                </td>
            </tr>

            <tr>
                <td>
                    备注
                </td>
                <td style="text-align: left;" colspan="8">
                    1、 移交事项根据不同职位对所涉及的工作内容和程序进行详细说明，并提供以往的各种资料；<br>
                    2、 离职员工应根据表单所要求的内容，到相应部门办理相关手续，并由部门负责人签字，部门经理进行最终确认；<br>
                    3、 移交工作要明确、详细、有条理，在接替人或代理人能胜任所移交的工作内容后签字生效；<br>
                    4、 移交人凭《工作移交单》到企业管理部人资组办理离职手续。<br>
                    5、 以上各部门签字确认后，则视为交接完整，企业管理部以签批完整的工作移交单核算薪资。
                </td>
            </tr>
        </table>
        <table border="1">

        </table>
        <!-- <button @click="saveData" v-if="!isView">保存数据</button> -->
    </div>
</template>
<script>
import { getWorkHandoverDetail, saveWorkHandover } from '@/api/workHandover';
import { Message } from 'element-ui';

export default {
    name: "gzyijiaodan",
    data() {
        return {
            pageType: 'add', // add, edit, view
            formData: {
                id: null,
                name: '',
                jobNumber: '',
                department: '',
                position: '',
                // 所属部门检查项
                computerEquipment: false,
                technicalDocuments: false,
                tools: false,
                accounts: false,
                officeSupplies: false,
                departmentSuccessor: '',
                departmentManager: '',
                // 品质部检查项
                antiStaticSupplies: false,
                qother: '',
                qotherCheck: false,
                qmanager: '',
                // 工程部检查项
                technicalFiles: false,
                emanager: '',
                // 物控部检查项
                productsBorrowed: false,
                returnedProperly: false,
                mmanager: '',
                // 厂务部检查项
                fworkCompleted: false,
                fmanager: '',
                // 总经理办公室检查项
                gworkCompleted: false,
                gmanager: '',
                // 财务管理部检查项
                unsettledAccounts: false,
                personalLoans: false,
                fixedAssets: false,
                finManager: '',
                // 企业管理部检查项 - 食堂费用
                canteenMonth1: null,
                canteenAmount1: null,
                canteenMonth2: null,
                canteenAmount2: null,
                canteenCheck: false,
                canteenHandler: '',
                // 宿舍检查
                dormitoryBasicCheck: false,
                dormitoryHandler: '',
                rent1Month: null,
                rent1Amount: null,
                waterElectricity1: '',
                repair1Count: null,
                uniform1Amount: null,
                rent2Month: null,
                rent2Amount: null,
                waterElectricity2: '',
                repair2Count: null,
                uniform2Amount: null,
                dormitoryDetailsCheck: false,
                // 社保/住房公积金
                socialMonth1: null,
                pension1: null,
                medical1: null,
                unemployment1: null,
                housingFund1: null,
                socialMonth2: null,
                pension2: null,
                medical2: null,
                unemployment2: null,
                housingFund2: null,
                socialCheck: false,
                socialHandler: '',
                // 培训费用
                trainingAmount: null,
                trainingCheck: false,
                trainingHandler: '',
                // 网络费用
                networkAmount: null,
                networkHandoverPerson: '',
                networkCheck: false,
                networkHandler: '',
                // 厂牌
                factoryBadgeCheck: false,
                factoryBadgeHandler: '',
                status: 'pending',
            }
        };
    },
    computed: {
        isView() {
            return this.pageType === 'view';
        }
    },
    created() {
        this.initPageData();
    },
    methods: {
        printForm() {
            window.print()
        },
        // 初始化页面数据
        async initPageData() {
            const { id, type } = this.$route.query;
            if (type) {
                this.pageType = type;
            }

            if (id) {
                try {
                    const response = await getWorkHandoverDetail(id);
                    if (response.data && response.data.code === 200) {
                        this.formData = response.data.data;
                    } else {
                        Message.error(response.data.message || '获取详情失败');
                    }
                } catch (error) {
                    console.error('获取详情错误：', error);
                    Message.error('获取详情失败：' + error.message);
                }
            }
        },

        // 验证表单
        validateForm() {
            if (!this.formData.name) {
                Message.error('请填写姓名');
                return false;
            }

            if (!this.formData.jobNumber) {
                Message.error('请填写工号');
                return false;
            }

            if (!this.formData.department) {
                Message.error('请填写所属部门');
                return false;
            }

            if (!this.formData.position) {
                Message.error('请填写职务');
                return false;
            }

            return true;
        },

        goToList() {
            this.$router.push('/main/renshi/renshizhidu/gzyijiaodan/gzyijiaodanList');
        },

        // 保存数据
        async saveData() {
            if (!this.validateForm()) {
                return;
            }

            // 确保布尔值字段正确初始化
            const booleanFields = [
                'computerEquipment', 'technicalDocuments', 'tools', 'accounts', 'officeSupplies',
                'antiStaticSupplies', 'qotherCheck', 'technicalFiles', 'productsBorrowed', 'returnedProperly',
                'fworkCompleted', 'gworkCompleted', 'unsettledAccounts', 'personalLoans', 'fixedAssets',
                'canteenCheck', 'dormitoryBasicCheck', 'dormitoryDetailsCheck', 'socialCheck',
                'trainingCheck', 'networkCheck', 'factoryBadgeCheck'
            ];

            booleanFields.forEach(field => {
                if (this.formData[field] === undefined || this.formData[field] === null) {
                    this.formData[field] = false;
                }
            });

            // 确保文本字段不为null或undefined
            const textFields = [
                'name', 'jobNumber', 'department', 'position',
                'qother', 'qmanager', 'emanager', 'mmanager', 'fmanager', 'gmanager', 'finManager',
                'departmentSuccessor', 'departmentManager', 'canteenHandler', 'dormitoryHandler',
                'waterElectricity1', 'waterElectricity2', 'socialHandler', 'trainingHandler',
                'networkHandoverPerson', 'networkHandler', 'factoryBadgeHandler'
            ];

            textFields.forEach(field => {
                if (this.formData[field] === null || this.formData[field] === undefined) {
                    this.formData[field] = '';
                }
            });

            // 确保数值字段不为null或undefined
            const numberFields = [
                'canteenMonth1', 'canteenAmount1', 'canteenMonth2', 'canteenAmount2',
                'rent1Month', 'rent1Amount', 'repair1Count', 'uniform1Amount',
                'rent2Month', 'rent2Amount', 'repair2Count', 'uniform2Amount',
                'socialMonth1', 'pension1', 'medical1', 'unemployment1', 'housingFund1',
                'socialMonth2', 'pension2', 'medical2', 'unemployment2', 'housingFund2',
                'trainingAmount', 'networkAmount'
            ];

            numberFields.forEach(field => {
                if (this.formData[field] === null || this.formData[field] === undefined) {
                    this.formData[field] = 0;
                }
            });

            try {
                console.log('提交的表单数据:', JSON.stringify(this.formData));
                const response = await saveWorkHandover(this.formData);
                if (response.data && response.data.code === 200) {
                    Message.success('保存成功');
                    this.$router.push('/main/renshi/renshizhidu/gzyijiaodan/gzyijiaodanList');
                } else {
                    Message.error(response.data.message || '保存失败');
                }
            } catch (error) {
                console.error('保存错误：', error);
                Message.error('保存失败：' + error.message);
            }
        }
    }
};
</script>

<style scoped lang="scss">
.content {

    font-family: '宋体', sans-serif;
    padding: 20px;
     background-color: #FFF; 
    // border-radius: 8px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    width: 210mm;
    margin: 0 auto;
    min-height: 100vh;
}

.header-actions {
    display: flex;
    justify-content: space-between;
}

table {
    width: 100%;
    border-collapse: collapse;
}

td,
th {
    text-align: center;
    padding: 5px;
}

input[type="number"] {
    width: 45px;
}

input[type="text"] {
    width: 80px;
}

/* button {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #66b1ff;
} */

input[type="checkbox"] {
    cursor: pointer;
}

input:disabled,
input[type="checkbox"]:disabled,
button:disabled {
    background-color: #f5f7fa;
    cursor: not-allowed;
    opacity: 0.7;
}

@media print {

    /*@page规则被用来设置打印页面的方向为横向*/
    // @page {
    //   size: landscape;
    // }

    .container {
        padding: 20px 10px 20px 1px;
        margin-right: 5px;
        box-shadow: 0 0px 0px rgba(255, 255, 255, 0) !important;
    }

    .header-actions {
        display: none;
    }


    .page-header {
        .header-actions {
            display: none;
        }
    }

    .main-form {
        box-shadow: none;
        padding: 10px;
    }

    table {
        margin: 10px 0px;
    }

    .info-table,
    .content-table,
    .approval-table {
        border: 1px solid #000;

        td,
        th {
            border: 1px solid #000;
        }
    }

    td,
    th {
        padding: 5px;
        border: 1px solid #000;
    }

    input {
        border: none !important;
        background-color: transparent !important;
        text-align: center;
    }

    textarea {
        border: 0px !important;
    }
}
</style>